<template>
    <!-- 小程序垃圾，遍历都不支持 -->
    <ul class='i-menu'>
        <li v-for="(item,index) in list" :key="index" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

            <div class="i-cell-bd">
                <div class="i-cell-text fwb">{{ item.F_FullName }}</div>
                <div class="i-cell-ft">
                </div>
            </div>
            <ul class='i-menu'>
                <li v-for="(item,index2) in item.childs" :key="index2" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                    <div class="i-cell-bd">
                        <div class="i-cell-text">{{ item.F_FullName }}</div>
                        <div class="i-cell-ft">
                        </div>
                    </div>
                    <ul class='i-menu'>
                        <li v-for="(item,index3) in item.childs" :key="index3" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                            <div class="i-cell-bd">
                                <div class="i-cell-text">{{ item.F_FullName }}</div>
                                <div class="i-cell-ft">
                                </div>
                            </div>
                            <ul class='i-menu'>
                                <li v-for="(item,index4) in item.childs" :key="index4" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                                    <div class="i-cell-bd">
                                        <div class="i-cell-text">{{ item.F_FullName }}</div>
                                        <div class="i-cell-ft">
                                        </div>
                                    </div>
                                    <ul class='i-menu'>
                                        <li v-for="(item,index5) in item.childs" :key="index5" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                                            <div class="i-cell-bd">
                                                <div class="i-cell-text">{{ item.F_FullName }}</div>
                                                <div class="i-cell-ft">
                                                </div>
                                            </div>
                                            <ul class='i-menu'>
                                                <li v-for="(item,index6) in item.childs" :key="index6" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                                                    <div class="i-cell-bd">
                                                        <div class="i-cell-text">{{ item.F_FullName }}</div>
                                                        <div class="i-cell-ft">
                                                        </div>
                                                    </div>
                                                    <ul class='i-menu'>
                                                        <li v-for="(item,index7) in item.childs" :key="index7" class="i-cell-menu i-cell-access" @click.stop=emitClick(item)>

                                                            <div class="i-cell-bd">
                                                                <div class="i-cell-text">{{ item.F_FullName }}</div>
                                                                <div class="i-cell-ft">
                                                                </div>
                                                            </div>
                                                            <tree-menus :list="item.childs"></tree-menus>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'treeMenus',
    props: { list: Array },
    data () {
        return {
            scopesDefault: []
        }
    },
    methods: {
        scope () {
            this.list.forEach((item, index) => {
                this.scopesDefault[index] = false
                if (item.childs.length > 0) {
                    this.scopesDefault[index] = true
                }
            })
        },
        emitClick (item) {
            this.$emit('handleClick', item)
        }
    }
}
</script>
<style>
.i-menu {
    box-sizing: border-box;
    width: 100%;
    padding-left: 15px;
}
.i-menu:first-child{
    padding-left: 0;
}
.fwb {
    font-weight: 600;
}
.i-cell-menu {
    position: relative;
    /* display: flex; */
    background: #fff;
    align-items: center;
    line-height: 1.4;
    font-size: 14px;
    overflow: hidden
}

.i-cell-bd {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #efefef;
}

.i-cell-text {
    line-height: 24px;
    font-size: 14px;
    flex:1;
}


.i-cell-ft {
    position: relative;
    text-align: right;
    color: #495060
}

.i-cell-access .i-cell-ft {
    padding-right: 13px
}

.i-cell-access .i-cell-ft::after {
    content: " ";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 2px;
    border-width: 2px 2px 0 0;
    border-color: #dddee1;
    border-style: solid;
    transform: translateY(-50%) matrix(.71, .71, -.71, .71, 0, 0)
}

/* .i-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid #e9eaec;
    border-bottom-width: 1px;
    left: 15px;
    right: 0
}

.i-cell-last::after {
    display: none
}
 */
</style>